<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
      #modifyModal {
        display: none;
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .modify-modal-box {
        width: 100%;
        height: 100%;
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #modifyModalContent {
        padding: 20px;
        background-color: #fff;
      }

      #modifyModal1 {
        display: none;
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .modify-modal-box1 {
        width: 100%;
        height: 100%;
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #modifyModalContent1 {
        padding: 20px;
        background-color: #fff;
      }
    </style>
  </head>
  <body>
    <button id="addBtn" type="button" class="btn btn-default">增加</button>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>名称</th>
          <th>城市</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr>
        <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr> -->
      </tbody>
    </table>
    <div id="modifyModal">
      <div class="modify-modal-box">
        <div id="modifyModalContent">
          <form>
            <!-- 用户不能修改学号 -->
            <div class="row">
              <label class="col-sm-4">ID:</label
              ><input class="col-sm-7" id="dataId" disabled type="text" />
            </div>
            <div class="row">
              <label class="col-sm-4">姓名：</label
              ><input class="col-sm-7" id="dataName" type="text" />
            </div>
            <div class="row">
              <label class="col-sm-4">城市：</label
              ><input class="col-sm-7" id="dataCity" type="text" />
            </div>
          </form>
          <div style="margin-top: 20px" class="row">
            <button id="cancelBtn" class="col-sm-6">取消</button>
            <button id="confirmBtn" class="col-sm-6">确定修改</button>
          </div>
        </div>
      </div>
    </div>
    <div id="modifyModal1">
      <div class="modify-modal-box1">
        <div id="modifyModalContent1">
          <form>
            <div class="row">
              <label class="col-sm-4">ID:</label
              ><input class="col-sm-7" id="dataId1" disabled type="text" />
            </div>
            <div class="row">
              <label class="col-sm-4">姓名：</label
              ><input class="col-sm-7" id="dataName1" type="text" />
            </div>
            <div class="row">
              <label class="col-sm-4">城市：</label
              ><input class="col-sm-7" id="dataCity1" type="text" />
            </div>
          </form>
          <div style="margin-top: 20px;" class="row">
            <button id="cancelBtn1" class="col-sm-6">取消</button>
            <button id="confirmBtn1" class="col-sm-6">确定新增</button>
          </div>
        </div>
      </div>
    </div>
    <script>
      const data = [
        { id: 1, name: "李四", city: "重庆" },
        { id: 2, name: "张三", city: "成都" },
      ];
      // 渲染表格
      function renderTbody(data) {
        $("tbody").empty();
        for (let i = 0; i < data.length; ++i) {
          const item = data[i];
          $("tbody").append(`
          <tr>
            <td>${item.name}</td>
            <td>${item.city}</td>
            <td>
            <button id="delete-btn" data-id="${item.id}" type="button" class="btn btn-danger">删除</button>
            <button id="modify-btn" data-id="${item.id}" type="button" class="btn btn-info">修改</button>
            </td>
          </tr>
          `);
        }
      }

      renderTbody(data);

      // 删除按钮处理
      $("tbody").on("click", "#delete-btn", function (event) {
        const dataId = parseInt($(event.target).attr("data-id"));
        // 修改 data
        // 通过id 找到对应数据 并删除
        for (let i = 0; i < data.length; ++i) {
          if (data[i].id === dataId) {
            data.splice(i, 1);
          }
        }
        renderTbody(data);
      });

      // 修改按钮处理
      $("tbody").on("click", "#modify-btn", function (event) {
        const dataId = parseInt($(event.target).attr("data-id"));
        $("#modifyModal").show();
        const currentData = data.find((item) => {
          return item.id === dataId;
        });
        // console.log(currentData);
        $("#dataId").val(currentData.id);
        $("#dataName").val(currentData.name);
        $("#dataCity").val(currentData.city);
      });

      // 取消修改按钮处理
      $("#cancelBtn").on("click", function () {
        $("#modifyModal").hide();
      });

      // 确认修改按钮处理
      $("#confirmBtn").on("click", function (event) {
        // 获取input值
        const id = parseInt($("#dataId").val());
        const name = $("#dataName").val();
        const city = $("#dataCity").val();

        // 基于input值 修改data
        for (let i = 0; i < data.length; ++i) {
          const item = data[i];
          if (item.id === id) {
            item.id = id;
            item.name = name;
            item.city = city;
          }
        }
        // 重新渲染
        renderTbody(data);
        // 隐藏弹窗
        $("#modifyModal").hide();
      });

      // 新增按钮处理
      $("#addBtn").on("click", function () {
        $("#modifyModal1").show();
        $("#dataId1").val();
        $("#dataName1").val();
        $("#dataCity1").val();

        // 新增确定按钮
        $("#confirmBtn1").on("click", function () {
          const id = data.length + 1;
          const name = $("#dataName1").val();
          const city = $("#dataCity1").val();
          var obj = { id, name, city };
          data.push(obj);
          console.log(data);
          renderTbody(data);
          $("#modifyModal1").hide();
        });
        // 新增取消按钮
        $("#cancelBtn1").on("click", function () {
          $("#modifyModal1").hide();
        });
      });
    </script>
  </body>
</html>
